import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
// 引入路由相关插件
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Ionicons from 'react-native-vector-icons/Ionicons'

// 引入导航
import ProfileStack from './ProfileStack'
import HomeStack from './HomeStack'
import RNStack from './RNStack'
import NewsStack from './NewsStack'

const Tab = createBottomTabNavigator();

export default class index extends Component {

  render() {
    return (
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
  
            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home-outline';
            } else if (route.name === 'RNStack') {
              iconName = focused ? 'list' : 'list-outline';
            } else if (route.name === 'News') {
              iconName = focused ? 'book' : 'book-outline';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'person' : 'person-outline';
            }
  
            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="News" component={NewsStack} />
        <Tab.Screen name="RNStack" component={RNStack} />
        <Tab.Screen name="Profile" component={ProfileStack} />
      </Tab.Navigator>
    )
  }
}

const styles = StyleSheet.create({})
